import React, { useState } from 'react';
import { Form, Input, Button, message, Card, Typography, Space } from 'antd';
import {
  UserOutlined,
  BankOutlined,
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import { accountService } from '@/services/accountService';
import { UserProfile } from '@/types/account';
import styles from './CompleteProfile.module.css';

const { Title, Paragraph } = Typography;

const CompleteProfile: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const stateMessage = (location.state as any)?.message;

  const handleSubmit = async (values: Partial<UserProfile>) => {
    setLoading(true);
    try {
      // 使用 POST 方法创建 profile
      await accountService.createProfile(values);
      message.success('个人资料完善成功！');
      navigate('/', { replace: true });
    } catch (error: any) {
      console.error('完善个人资料失败:', error);
      message.error(error.response?.data?.message || '完善个人资料失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <Card className={styles.formCard} bordered={false}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div className={styles.header}>
            <Title level={2}>完善个人资料</Title>
            <Paragraph type="secondary">
              {stateMessage || '首次登录需要完善个人资料，请填写以下信息'}
            </Paragraph>
          </div>

          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            className={styles.form}
          >
            <Form.Item
              label="真实姓名"
              name="real_name"
              rules={[
                { required: true, message: '请输入真实姓名' },
                { max: 50, message: '真实姓名不能超过50个字符' }
              ]}
            >
              <Input 
                prefix={<UserOutlined style={{ color: '#bfbfbf' }} />}
                placeholder="请输入真实姓名" 
                size="large"
              />
            </Form.Item>

            <Form.Item
              label="学校"
              name="school"
              rules={[
                { required: true, message: '请输入学校名称' },
                { max: 100, message: '学校名称不能超过100个字符' }
              ]}
            >
              <Input 
                prefix={<BankOutlined style={{ color: '#bfbfbf' }} />}
                placeholder="请输入学校名称" 
                size="large"
              />
            </Form.Item>

            <Form.Item>
              <Button 
                type="primary" 
                htmlType="submit" 
                block 
                size="large"
                loading={loading}
                className={styles.submitButton}
              >
                完成
              </Button>
            </Form.Item>
          </Form>
        </Space>
      </Card>
    </div>
  );
};

export default CompleteProfile;

